<template>
  <div>
    <el-breadcrumb class="breadcrumb page-title" separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">Bus Stop Map</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="google-map-box">
      <div class="map-box">
        <div id='Map'></div>
      </div>
    </div>
  </div>
</template>
<script>
  import GoogleMapsLoader from 'google-maps';
  import {mapAll} from '../../api/zxy_api'
  import qs from 'qs'

  export default {
    name: 'myMap',
    data () {
      return {
        isInitMap: false,
        input: '',
        lat: 16.869607,
        lng: 96.195590,
        latlng: [
          {lat: 16.860607, lng: 96.194590, name: 'abc', id: '123'},
          {lat: 16.879607, lng: 96.195490, name: 'yuii', id: '3651'},
        ]
      }
    },
    methods: {
      // message alert 用于前端错误提示信息
      messageToastErr (msg) {
        this.$message({
          showClose: true,
          message: msg,
          duration: 1500,
          type: 'error'
        })
      },
      initMap (latlngs) {
        this.isInitMap = true
        /* 初始化地图 */
        let map = new window.mapsObj.googleObj.maps.Map(document.getElementById('Map'), {
          center: new window.mapsObj.googleObj.maps.LatLng(this.lat,this.lng),
          scrollwheel: true,
          zoom: 11
        })
        var markers = []
        /* 设置标记 */
        for (var i = 0; i < latlngs.length; i++) {
          let marker = new window.mapsObj.googleObj.maps.Marker({
            map: map,
            position: new window.mapsObj.googleObj.maps.LatLng(latlngs[i].lat,latlngs[i].lng)
          })
          let contentString = '<div id="content">'+'<div id="siteNotice">'+'<p>'+latlngs[i].nameEn+'</p>'+'<p>'+latlngs[i].id+'</p>'+ '</div>'+ '</div>'
          let infowindow = new window.mapsObj.googleObj.maps.InfoWindow({
            content: contentString
          })
          marker.addListener('click', function() {
            infowindow.open(map, marker)
          })
          markers.push(marker)
          // infowindow.open(map, marker)
        }
        var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m', gridSize: 20, minimumClusterSize: 4})
      },
    },
    mounted () {
      GoogleMapsLoader.KEY = 'AIzaSyD6fBhKRpK6KPw8pxwQAQDI3AyzViGIUOY'
      GoogleMapsLoader.VERSION = '3'
      GoogleMapsLoader.LIBRARIES = ['geometry', 'places']
      GoogleMapsLoader.load(function (google) {
        let geocoder = new google.maps.Geocoder()
        let googleObj = google
        let mapsObj = {autocomplete: '', geocoder: geocoder, googleObj: googleObj}
        window.mapsObj = mapsObj
      })
      let param = {
        status : 1
      }
      // 请求数据
      mapAll(param).then((res) => {

        this.initMap(res.data)

      }).catch((e) => {
        console.log(e)
      })

    }
  }
</script>
<style>
  #Map {
    width: 100%;
    height: 92vh;
    line-height: 400px;
    color: #aeaeae;
    background: #fff;
  }

  #siteNotice p{
    margin:0;
  }

  .page-title {
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px !important;
    padding: 10px 40px!important;
  }
</style>
